<template>
  <van-nav-bar
      title="合同详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      dis/>
<!--  <h4>上传合同</h4>-->
  <div class="image-container">
    <img  class="image-fill" :src=hto>
  </div>
<!--  废话-->
  <div class="fh">
    <h6>上传租房合同可极大提升"转租""换租"成功率</h6>
  </div>
<!--  底部-->
  <div class="dibu">
    <van-uploader :after-read="afterRead2">
    <van-button color="black" class="anniu" id="schtt">上传合同</van-button>
    </van-uploader>
  </div>

</template>

<script setup>
import {ref} from 'vue'
import {showToast} from 'vant'
import axios from "axios";
import {useStore} from '../../pinia/index.js'
const store = useStore()
const onClickLeft = () => history.back();
const hto=ref()
hto.value="http://yangzhenke.oss-cn-beijing.aliyuncs.com/img/8fe8334a55424479935144880416f2a1.JPG"
const afterRead2 = (file) => {
  const formData = new FormData()
  formData.append('file', file.file)
  console.log(formData)
  axios.post("http://39.106.55.36:9099/my/load", formData).then(r => {
    hto.value=r.data.data
    document.getElementById("schtt").innerText="已经上传"
    store.user.hetong="已上传"


  })
}


</script>

<style >
.anniu{
width: 380px;
}
.dibu{
  position: absolute;
  top: 759px;
  padding-top: 20px;
  left: 0;
  width: 430px;
  height: 173px;
  background-color: white;
}
h6{
  font-size: 13px;
  color: #888888;
}
.fh{
  position: absolute;
  top: 634px;
  left: 28px;
  width: 360px;
  height: 50px;
}
.image-container{
  position: absolute;
  top: 86px;
  left: 28px;
  width: 360px;
  height: 533px;
  border-radius: 5px;
  border: 6px solid white;
  overflow: hidden; /* 这将隐藏超出 div 的图片部分 */

}
.image-fill {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 这将使图片铺满整个 div */
  display: block;
  position: absolute; /* 这将使图片相对于其父元素定位 */
  top: 0;
  left: 0;
}
</style>
